<template>
  <h2>我是ref的测试组件实例</h2>
  <button @click="changeinfo">改变info</button>
</template>

<script>
import { ref, toRef, toRefs, reactive } from "vue";
export default {
  setup(props, ctx) {
    const message = reactive({
      info: "你好，我是ref的api",
      name: "测试",
      xfy: {
        name: "xfy",
        age: 18,
      },
    });
    // 直接使用解构时 对于基本数据类型只是值得传递 此时并不是一个ref对象
    // 对于对象是一个值得引用
    // let { info, name, xfy } = message;

    // 使用torefs时  基本数据类型改变后 对应解构的值也会改变  双方任意一方发生改变  另一方都会改变

    // toref  torefs传入的是reactive对象
    let { info, name } = toRefs(message);
    const changeinfo = () => {
      info.value = "torefs改变后的值";
      // xfy.age = "19";
      // console.log(message.xfy);
      console.log(info.value);
      console.log(message.info);
      // console.log(xfy);
    };
    return {
      message,
      info,
      name,
      // xfy,
      changeinfo,
    };
  },
};
</script>

<style></style>
